<template>
	<view class="finish" :style="{height: wh + 'px'}">
		<view class="hearder">
			<view class="nav">
				<u-icon name="arrow-left" @click="ToOrder" />
				<view class="nav-title">订单{{OrderTitle}}</view>
			</view>
			<view class="orderbg"></view>
			<view class="serve-confirm" v-if="OrderDe.code">服务确认码：{{OrderDe.code || ''}}</view>
		</view>
		<view class="product">
			<view class="product-item">
				<image class="img" :src="OrderDe.image" @click="ToDetail" />
				<view class="info">
					<view class="name">
						<view>{{ OrderDe.product  || ''}}</view>
						<view>x{{OrderDe.goods_count || ''}}</view>
					</view>
					<view class="titleone">服务时间:{{OrderDe.product_item || ''}}</view>
					<view class="titletwo">服务规格:{{OrderDe.product_detail || ''}}</view>
					<view class="price">￥{{ OrderDe.goods_price || ''}}/台</view>
				</view>
			</view>
			<!-- 	<view class="time">
				<view class="time1">
					服务质保期<text class="three">3天</text>
				</view>
				<view class="time2">
					<text class="three">已开启 </text>
					<u-icon name="arrow" color="#0CAC85" />
				</view>
			</view> -->
			<view class="items">
				<view class="item-left">商品金额</view>
				<view class="item-right">￥{{ OrderDe.goods_price}}</view>
			</view>
			<!-- 	<view class="items">
				<view class="item-left">
					意外保
				</view>
				<view class="item-right">
					平台免费赠送 ¥0.00
					<u-icon name="arrow" />
				</view>
			</view> -->
			<view class="items">
				<view class="item-left">优惠券</view>
				<view class="item-right">¥ {{ OrderDe.coupon_money }}</view>
			</view>
			<view class="items">
				<view class="item-left">实际支付</view>
				<view class="item-right orange">{{ OrderDe.order_amount_total}}</view>
			</view>
			<view class="items" v-if="OrderTitle == '待付款'">
				<view class="item-left">待付款剩余时间</view>
				<view class="item-right">{{ newendtime}}</view>
			</view>
		</view>
		<view class="fenger"></view>
		<view class="product producttwo">
			<view class="items">
				<view class="item-left">订单编号</view>
				<view class="item-right">{{ OrderDe.order_no }}
					<text class="green" @click="docopy">复制</text>
				</view>
			</view>
			<view class="items">
				<view class="item-left">下单时间</view>
				<view class="item-right">{{createtime}}</view>
			</view>
			<view class="items">
				<view class="item-left">期望上门时间</view>
				<view class="item-right">{{ doorTime }}</view>
			</view>
			<view class="items" v-if="OrderDe.address">
				<view class="item-left"></view>
				<view class="item-right">
					<text>{{ OrderDe.address.title }}</text>
					<text>{{ OrderDe.address.mobile }}</text>
				</view>
			</view>
			<view class="items" v-if="OrderDe.address">
				<view class="item-left"></view>
				<view class="item-right">
					{{ OrderDe.address.city }}
					{{ OrderDe.address.remark }}
					{{ OrderDe.address.house_number }}
				</view>
			</view>
			<view class="items">
				<view class="item-left">支付时间</view>
				<view class="item-right">{{ payTime }}</view>
			</view>
		</view>

		<!-- 退款按钮 -->
		<view class="refund" v-if="OrderTitle == '待预约'">
			<button class="btn" @click="ToArefund">我要退款</button>
		</view>
		<!-- 付款按钮 -->
		<view class="refund" v-if="OrderTitle == '待付款'">
			<button class="btn" @click="dopay">去付款</button>
		</view>
	</view>
</template>

<script>
	import { ResOrderDe, ResBefore, ResCreate, ResPay } from '@/untils/api.js'
	import { toDate } from '@/untils/gettime.js'
	export default {
		data() {
			return {
				OrderDe: [],
				payTime: '',
				doorTime: '',
				OrderTitle: '',
				createtime: '',
				wh: '',
				endtime: '',
				newendtime: ''
			}
		},
		onLoad(option) {
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
			this.getOrderDe(option)
			this.OrderTitle = option.status
			this.endtime = option.endtime

			// 倒计时
			let timer = setInterval(() => {
				this.endtime--
				let m = parseInt(this.endtime / 60 % 60) // 分
				let s = parseInt(this.endtime % 60) // 秒
				this.newendtime = m + '分' + s + '秒'
				if (this.endtime <= 0) {
					clearInterval(timer)
					return this.newendtime = ''
				}
			}, 1000)


		},
		methods: {
			// 去付款
			async dopay() {
				// 获取订单号
				let orderObj = {
					orderNo: this.OrderDe.order_no
				}
				// 发起支付
				const { data: resc } = await ResPay(orderObj)
				let payInfo = resc.data
				console.log(resc, '发起支付');

				//uni发起微信支付
				wx.requestPayment({
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package: payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,

					success: (res) => {
						uni.navigateTo({
							url: `/pages/Home/Pay?price=${this.OrderDe.order_amount_total}`
						})
						// 从本地删除获取订单号
						uni.removeStorageSync('orderNo')
					},
					fail: (res) => {
						uni.$showMsg('用户已取消支付！')
					}
				})
			},
			ToDetail() {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${this.OrderDe.product_id}`
				})
				uni.setNavigationBarTitle({
					title: this.OrderDe.product
				})
			},
			docopy() {
				uni.setClipboardData({
					data: this.OrderDe.order_no,
					success: (res) => {
						uni.$showMsg('您已复制成功!')
					}
				})
			},
			ToArefund() {
				// 将价格/ID传到退款申请页
				uni.navigateTo({
					url: `/pages/Order/Arefund?id=${this.OrderDe.id}&price=${this.OrderDe.order_amount_total}`
				})
			},
			ToOrder() {
				uni.navigateBack()
			},
			async getOrderDe(id) {
				const { data: res } = await ResOrderDe(id)
				if (res.code != 1) return uni.$showMsg(res.msg)
				console.log(res, '订单详情');
				this.OrderDe = res.data

				// 时间格式化
				this.payTime = toDate(res.data.pay_time, 1)
				this.doorTime = toDate(res.data.door_time, 1)
				this.createtime = toDate(res.data.createtime, 1)
				if (res.data.pay_time == null) {
					this.payTime = '——'
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.finish {
		background-color: #fff;
		padding: 0;

		font-family: PingFangSC-Medium, PingFang SC;
		overflow-x: hidden;
	}

	.hearder {
		padding: 90rpx 0 20rpx;
		background-color: #f7f7f7;
		position: relative;

		.nav {
			padding-left: 40rpx;
			margin-bottom: 40rpx;

			.nav-title {
				margin-top: 68rpx;
				font-size: 48rpx;
				font-weight: 500;
				color: #111415;
			}
		}

		.orderbg {
			width: 138rpx;
			height: 138rpx;
			background: url('/static/image/orderbg.png') no-repeat;
			background-size: 138rpx;
			position: absolute;
			top: 180rpx;
			right: -20rpx;
		}

		.serve-confirm {
			background-color: #FFF;
			padding: 26rpx 40rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #111415;

		}

	}

	.product {
		padding: 30rpx;
		background-color: #FFF;

	}

	.product-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.product-item .img {
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
	}

	.product-item .info {
		flex: 1;
		font-size: 30rpx;
		font-weight: 400;
		color: #111415;

		.name {
			display: flex;
			justify-content: space-between;

		}

		.titleone,
		.titletwo {
			color: #919191;
			font-size: 26rpx;
		}

		.price {
			font-size: 30rpx;
			font-weight: 400;
			color: #CB6C72;
		}
	}


	.product .time {
		width: 687rpx;
		height: 61rpx;
		background: #F0FFFC;
		border-radius: 7rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		font-weight: 400;
		color: #3B3B3B;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.three {
		color: #0CAC85;
	}

	.fenger {
		height: 20rpx;
		background-color: #f7f7f7;
	}

	.producttwo {
		margin-bottom: 120rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		height: 50rpx;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #57585C;
		margin: 10rpx 0;
	}

	.items .item-right {
		text-align: right;
		width: 416rpx;
	}

	.orange {
		color: #E85B35;
	}

	.green {
		color: #00AF82;
		margin-left: 10rpx;
	}

	.refund {
		width: 100%;
		height: 125rpx;
		box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

		.btn {
			width: 183rpx;
			height: 71rpx;
			line-height: 71rpx;
			border-radius: 50rpx;
			position: absolute;
			right: 19rpx;
			bottom: 25rpx;
			font-size: 26rpx;
			border: 1rpx solid #C1C6C5;
		}

		button.btn::after {
			display: none;
			border: none;
		}
	}
</style>
